import {FireFilled, HeartFilled, ShareAltOutlined, MessageOutlined} from '@ant-design/icons'
import React from 'react'
import styles from './FeedItemToolbar.module.scss'

function Button({icon, label, hoverColor}) {
  // const newIcon = React.cloneElement(icon, {
  //   style: {color: '#ddd'}
  // })
  return <span className={styles.button+" "+styles[hoverColor]}>
    {icon} {label}
  </span>
}

export default function FeedItemToolbar() {
  return <div>
    <Button
      icon={<FireFilled />}
      label={11}
      hoverColor='orange'
    />
    <Button
      icon={<MessageOutlined />}
      label={11}
      hoverColor='default'
    />
    <Button
      icon={<HeartFilled />}
      label={11}
      hoverColor='red'
    />
    <Button
      icon={<ShareAltOutlined />}
      label={11}
      hoverColor='default'
    />
  </div>
}